<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:replace="dashboard/header :: header"></head>
<body>
	<div layout:fragment="content">
   
		<!-- ztree -->
		<link rel="stylesheet" th:href="@{/asserts/vendors/ztree/css/metroStyle/metroStyle.css}" type="text/css">

		<div class="container-div">
			<div class="animated fadeIn">
				<div class="row">
					<div>
						<div class="card col-lg-3 tree-card" style="float: left; margin-right: 0% ; overflow-x: hidden; overflow-y: scroll;">
							 <!-- 
						 	  <div class="card-body">
			                   		<ul id="treeDemo" class="ztree"></ul>	
			                  </div>
						 	   -->
			                  
			                  <div class="box box-main  search-collapse">
									<div class="box-header">
										<div class="box-title">
											<i class="fa icon-grid"></i> 省市列表 
										</div>
										<div class="box-tools pull-right">
											<button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
											<button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
											<button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新应用"><i class="fa fa-refresh"></i></button>
										</div>
									</div>
									<div class="ui-layout-content">
										<ul id="treeDemo" class="ztree"></ul>	
									</div>
								</div>
					
						</div>

						<div class="col-lg-9" style="float: left;">
							<div class="col-sm-12 search-collapse">
								<form id="operlog-form">
									<div class="select-list">
										<ul>
											<li>
												<label> 区域名称  </label> 
												<input id="districtName" name="condition[districtName|like]" type="text" placeholder="菜单名称">
												<input id="parentId" name="condition[parentId]" type="hidden" >
											</li>
											<li>
												<label> 简称  </label> 
												<input id="shortName" name="condition[resourceLink|like]" type="text" placeholder="链接">
											</li>
											<li>
												<label> 级别  </label> 
												<input id="level" name="condition[level]" type="text" placeholder="链接">
											</li>
											<li>
												<label> 状态  </label> 
												<input id="hasStatus" name="condition[hasStatus|like]" type="text" placeholder="链接">
											</li>
											<li>
												<a class="btn btn-success btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
												<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
											</li>
										</ul>
									</div>
								</form>
							</div>
								
								
								<div class="btn-group-sm" id="toolbar" role="group">
									<a class="btn btn-success" onclick="$.operate.add()">
										<i class="fa fa-plus"></i> 新增
									</a>
									<a class="btn btn-danger btn-del disabled" onclick="$.operate.removeAll()">
							            <i class="fa fa-remove"></i> 删除
							        </a>
							        <a class="btn btn-danger" onclick="$.operate.clean()">
						                <i class="fa fa-trash"></i> 清空
						            </a>
						            <a class="btn btn-warning" onclick="$.table.exportExcel()">
							            <i class="fa fa-download"></i> 导出
							        </a>
						        </div>
						        
								<div class="col-sm-12 select-table table-striped">
									<table id="bootstrap-table" data-mobile-responsive="true"></table>
								</div>
								
							</div>
					</div>
					<!-- /.col-->
				</div>
				<!-- /.row-->
			</div>
		</div>

	</div>

	<footer th:replace="dashboard/footer :: footer"></footer>
	
	<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.core.js}"></script>
	<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.excheck.js}"></script>
	<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.exedit.js}"></script>
	<script type="text/javascript" th:src="@{/asserts/vendors/jquery.form.autofill/jquery.formautofill.js}"></script>
	
	<script type="text/javascript">
		var setting = {
			async : {
				enable : true,
				url: ctx+"boot/platform/address/province" 
			},
			data : {
				simpleData : {
					enable : true,
					idKey : "id",
					pIdKey : "parentId",
					rootPId : 0
				},
				key : {
					name : "districtName"
				}
			},
			callback : {
				onClick : zTreeOnClick 
			}
		};
	
		function zTreeOnClick(event, treeId, treeNode) {
			$("input[id=parentId]").val(treeNode.id) ;
			$.table.search(); ; 
		};
	
		$(document).ready(function() {
			var treeObj = $.fn.zTree.init($("#treeDemo"), setting);
			treeObj.expandAll(true);
			
			var h = $(document).height() ; 
			$("div.tree-card").css("height" , h) ; 
		});
	</script>
	
	<script>
		var detailFlag = "";
		var prefix = ctx + "monitor/operlog";

		$(function() {
		    var options = {
		        url: ctx+"boot/platform/address/datatables" ,
		        createUrl: ctx + 'boot/platform/address/add' ,
		        updateUrl: ctx+"boot/platform/address/modify?id={id}" ,
		        changeStatusUrl: ctx+"boot/platform/address/changeStatus?id={id}" , 
		        cleanUrl: prefix + "/clean",
		        detailUrl: ctx+"boot/platform/address/detail?id={id}",
		        removeUrl: ctx+"boot/platform/address/delete" ,
		        exportUrl: prefix + "/export",
		        sortName: "operTime",
		        uniqueId:"id" ,
		        sortOrder: "desc",
		        modalName: "操作日志",
		        escape: true,
		        showPageGo: true,
		        rememberSelected: true,
				columns: [{field: 'state',checkbox: true },
		        	
		        	{field: 'districtName', title: '区域名称'},
			        {field: 'shortName', title: '简称'},
			        {field: 'longitude', title: '经度'},
			        {field: 'latitude', title: '维度'},
			        {field: 'level', title: '级别'},
			        {field: 'sort', title: '排序'},
			     
			        {field: 'hasStatusLabel', title: '状态', align: 'center',  formatter:function(value,row,index){ return $.table.status(value , row);}},
			        {field: 'addTime', width:'150',align:'center', title: '添加时间', sortable: true},
			        {field: 'id' , title: '操作', width:'150', align: 'center',  formatter: function(value, row, index) {
			                var actions = [];
			                
			                actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
			                actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a> ');
			                
			                return actions.join('');
			          }
			     }]
		    };
		    $.table.init(options);
		});
		
		function searchPre() {
		    var data = {};
		    data.businessTypes = $.common.join($('#businessTypes').selectpicker('val'));
		    $.table.search('operlog-form', data);
		}
		
		function resetPre() {
			$.form.reset();
			$("#businessTypes").selectpicker('refresh');
		}
	</script>

</body>
</html>
